<template>
  <div id="app">
    <!-- 下载进度条框 -->
    <div v-if="isDownloading" class="download-progress-container">
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: downloadProgress + '%' }"></div>
      </div>
      <span>{{ downloadProgress }}%</span>
    </div>
    <header>
      <h1>粤语敏感信息转换平台</h1>
    </header>
    <div class="main-content">
      <div :class="['sidebar', {'sidebar-collapsed': isSidebarCollapsed}]">
        <button class="toggle-sidebar-button" @click="toggleSidebar">
          <i :class="['fa-solid', isSidebarCollapsed ? 'fa-angle-right' : 'fa-angle-left']"></i>
        </button>
        <div class="sidebar-content">
          <ul class="sidebar-menu">
            <li
                v-for="menu in menus"
                :key="menu.id"
                :class="{ 'active': activeMenu === menu.id }"
                @click="switchMenu(menu.id)"
            >
              <i :class="['fa-solid', menu.icon]"></i>
              <span>{{ menu.name }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="task-container">
        <div v-if="activeMenu === 'task'">
          <div v-if="loading" class="loading-text">加载中...</div>
          <template v-else>
            <!-- 根据当前页和每页数量显示任务 -->
            <div class="button-group">
              <div class="right-aligned-buttons">
                <button class="custom-button" @click="isDialogVisible = true">上传</button>
                <button class="custom-button" @click="startAudioProcessing">开始转换</button>
                <button class="custom-button" @click="batchDownload">批量下载</button>
              </div>
            </div>
            <div class="task-section" v-for="(section, index) in paginatedTasks" :key="index">

              <div class="task-header">
                <div class="left-group">
                  <input
                      type="checkbox"
                      v-model="section.isAllSelected"
                      @change="toggleSelectAll(section)"
                  />
                  <el-text class="section-title" tag="b" size="medium">{{ section.title }}</el-text>
                  <button class="toggle-button" @click="section.isExpanded = !section.isExpanded">
                    <i :class="['fa-solid', section.isExpanded ? 'fa-angle-down' : 'fa-angle-right']"></i>
                  </button>
                </div>
                <div class="refresh-column">
                  <!-- 使用Font Awesome图标替换文本 -->
                  <button class="refresh-icon-button" @click="refreshTask(section)">
                    <i class="fa-solid fa-refresh"></i>
                  </button>
                </div>
              </div>
              <div class="recording-list" v-show="section.isExpanded">
                <div class="recording-list">
                  <!-- 循环渲染每个任务下的音频 -->
                  <div
                      class="recording-item"
                      v-for="(audio, audioIndex) in section.audios"
                      :key="audioIndex"
                  >
                    <input
                        type="checkbox"
                        v-model="selectedRecordings"
                        :value="audio.id"
                    />
                    <span>{{ audio.name }}</span>
                    <div class="progress-bar">
                      <div class="progress-fill" :style="{ width: audio.progress + '%' }"></div>
                    </div>
                    <button
                        class="download-button"
                        :class="{ 'download-available': audio.progress === 100, 'download-unavailable': audio.progress < 100 }"
                        :disabled="audio.progress < 100"
                        @click="downloadAudio(audio)"
                    >
                      <i class="fa-solid fa-download mr-1"></i>
                      <span>{{ audio.progress === 100 ? '下载' : '处理中' }}</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- 其他菜单对应的页面 -->
        <div v-if="activeMenu === 'analysis'" class="menu-page">
          <h2>数据分析</h2>
          <!-- 分析页面内容 -->
        </div>

        <div v-if="activeMenu === 'settings'" class="menu-page">
          <h2>系统设置</h2>
          <!-- 设置页面内容 -->
        </div>
      </div>
    </div>

    <!-- 上传对话框 -->
    <el-dialog
        v-model="isDialogVisible"
        title="新建任务"
        :close-on-click-modal="false"
    >
      <el-form :model="formData" ref="formRef" label-width="100px">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="formData.taskName"></el-input>
        </el-form-item>
        <el-form-item label="选择文件">
          <input type="file" multiple @change="handleFileChange"/>
        </el-form-item>
        <!-- 展示已选择的文件 -->
        <el-form-item label="已选择文件">
          <div v-if="selectedFiles.length === 0">暂无选择的文件</div>
          <el-card
            v-for="file in selectedFiles"
            :key="file.name"
            class="file-card"
          >
            <span>{{ file.name }}</span>
          </el-card>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="isDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 全局任务分页控件 -->
    <div class="pagination-container">
      <el-pagination
          @size-change="handleGlobalSizeChange"
          @current-change="handleGlobalCurrentChange"
          :current-page="globalCurrentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="globalPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="taskSections.length"
          prev-text="上一页"
          next-text="下一页"
          total-text="总数"
          sizes-text="每页显示"
          pager-count="页"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script src="./App.js"></script>
<style lang="scss" scoped src="./App.scss"></style>